extends flowgraph-layout

block content

  div.container
    // Elephant images courtesy of Ted Mitchner, Qing Li, and spotted paint
    div.panel.panel-default
      div.panel-body
        div.row.row-centered
          div.col-md-12.col-centered
            table.table.table-hover.table-striped.table-condensed#running
          div.col-md-6.col-centered
            div.panel.panel-default
              div.panel-heading#actitle Mapper & Reducer Counts Per Step
                span(id="actoggle_right",style="float:right",class="glyphicon glyphicon-arrow-right")
                span(id="actoggle_left",style="float:right",class="glyphicon glyphicon-arrow-left")
              div.panel-body
                div.subpanel#areachart(overflow-x='auto')
                  img(class='waitforrender', src='/images/pleasewait.gif', style='top:15%;', alt='Loading, please wait...')
          div.col-md-6.col-centered
            div.panel.panel-default
              div.panel-heading#right_toggle_title Running Time Per Step
                span(id="right_toggle_right",style="float:right",class="glyphicon glyphicon-arrow-right")
                span(id="right_toggle_left",style="float:right",class="glyphicon glyphicon-arrow-left")
              div.panel-body
                div.subpanel#timechart
                  img(class='waitforrender', src='/images/pleasewait.gif', style='top:15%;', alt='Loading, please wait...')
    div.row.row-centered.hidden#fail_links_parent
      div.col-md-12.col-centered
        div.panel.panel-default
          div.panel-heading Failure Log Links
          div.panel-body
            div.logbox#fail_links
    div.row.row-centered
      div.col-md-8.col-centered
        div.panel.panel-default
          div.panel-heading Graph View
          div.panel-body
            svg#flowgraph
              g
      div.col-md-4.col-centered
        div.panel.panel-default
          div.panel-heading(id='mrdetail-title') MapReduce Details
          div.panel-body#flowdetails
    div.row.row-centered
      div.col-md-6.col-centered
        div.panel.panel-default
          div.panel-heading All Job Inputs
          div.panel-body.word-wrap#all_inputs
      div.col-md-6.col-centered
        div.panel.panel-default
          div.panel-heading All Job Outputs
          div.panel-body.word-wrap#all_outputs    

  script.
    var flow_id = '#{flow_id}';

  script(src='/scripts/flowgraph-client.js')
